<template>
  <div style="padding:15px" @click.stop="fileVerify = false">
    <div class="boxclass" @dblclick="handleFullScreen">
      <!-- 头部顶栏 -->
      <div style="display:flex;justify-content: space-between;">
        <div>
          <img src="../../assets/logo.png" class="header-logo-img" alt style="flex:1" />
        </div>

        <div class="header-header-title">
          <div class="text-width" @click.stop="fileVerify = true">
            DREAM
            <div class="file-div" v-if="fileVerify">
              <select-page @selects="selectsFun"></select-page>
            </div>
          </div>
        </div>

        <!-- <div style="height:33px;line-height:44px">
          <h3>D r e a m</h3>
        </div>-->

        <div style="display:flex;align-items:center;align-items:center">
          <span class="header-organ">{{organName}}</span>
          <span class="quit" @click="quit">退出</span>
          <img src="../../assets/right.jpg" class="header-logo-img" alt />
        </div>
      </div>
      <!-- 图片栏和右边卡片页 -->
      <el-row :gutter="24" style="margin:0px;height:">
        <el-col :span="16" style="display:flex;flex-direction:row">
          <!-- 图片轮播和增加删除 -->
          <el-card
            class="box-card"
            style="height:220px;width:33%"
            :body-style="{ padding: '0px' }"
            v-for="i in 3"
            :key="i"
          >
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              style="height:220px;width:100%"
              @click="open_msg(i)"
            />
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card style="border:1px solid blue" :body-style="{'padding':'0px'}" object-fit:cove>
            <div
              slot="header"
              class="clearfix"
              style="background-color: #325194; width:100%;height:100%;color:white"
            >
              <span>Who We Are</span>
            </div>
            <div v-for="(item,index) in carddata" :key="index+10">
              <el-input v-model="item.value" clearable @blur="updatecard(item)"></el-input>
            </div>
            <div v-for="(item,index) in  cardarr" :key="index+20">
              <el-input v-model="item.value" clearable @blur="updatecard(item)"></el-input>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 表格项 -->
      <el-row :gutter="24" style="margin:0px;padding-top:1vw">
        <el-col :span="16" style="padding:0px">
          <div style="display:flex">
            <div
              style="height:340px;width:40px;padding:5px;background-color:#325194;color:white;border:none"
              class="shuli"
            >
              <div style="padding-top:50px; ">部门梦想</div>
              <div style="padding-top:50px">区域梦想</div>
            </div>

            <div>
              <el-table
                :data="DepttableData"
                style="width: 66%;"
                :header-cell-style="rowClass"
                :cell-style="cellclass"
                size="mini"
              >
                <el-table-column label="GLY" width="90" align="center" show-overflow-tooltip>
                  <el-table-column label="YTD" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_GLY_YTD" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Our Rank" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_GLY_OurRank" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Benchmark" width="100" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_GLY_Benchmark" size="mini" />
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="BS" align="center">
                  <el-table-column label="YTD" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_BS_YTD" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Our Rank" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_BS_OurRank" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Benchmark" width="100" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_BS_Benchmark" size="mini" />
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="Water Usage" align="center">
                  <el-table-column label="YTD" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_WaterUsage_YTD" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Our Rank" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_WaterUsage_OurRank" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Benchmark" width="100" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_WaterUsage_Benchmark" size="mini" />
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="CC" align="center">
                  <el-table-column label="YTD" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_CC_YTD" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Our Rank" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_CC_OurRank" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Benchmark" width="100" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Dept_CC_Benchmark" size="mini" />
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
              <div style="display:flex"></div>
              <el-table
                :data="AreatableData"
                style="width: 66%;padding-top:20px"
                :header-cell-style="rowClass"
                :cell-style="cellclass"
                size="mini"
              >
                <el-table-column label="TRIFR" align="center">
                  <el-table-column label="YTD" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row. Area_TRIFY_YTD" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Our Rank" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row. Area_TRIFY_OurRank" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Benchmark" width="100" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Area_TRIFY_Benchmark" size="mini" />
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="GLY" align="center">
                  <el-table-column label="YTD" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Area_GLY_YTD" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Our Rank" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Area_GLY_OurRank" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Benchmark" width="100" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Area_GLY_Benchmark" size="mini" />
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="LEF" align="center">
                  <el-table-column label="YTD" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Area_LEF_YTD" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Our Rank" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Area_LEF_OurRank" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Benchmark" width="100" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row. Area_LEF_Benchmark" size="mini" />
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="CC" align="center">
                  <el-table-column label="YTD" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row. Area_CC_YTD" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Our Rank" width="90" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Area_CC_OurRank" size="mini" />
                    </template>
                  </el-table-column>
                  <el-table-column label="Benchmark" width="100" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Area_CC_Benchmark" size="mini" />
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <el-card style="border:1px solid blue" :body-style="{'padding':'0px'}">
            <div slot="header" class="clearfix">
              <span>B D</span>
            </div>
            <div v-for="(item,index) in BDdata" :key="index+30">
              <el-input v-model="item.value" clearable @blur="updateBd(item)"></el-input>
            </div>
            <div v-for="(item,index) in bdarr" :key="index+40">
              <el-input v-model="item.value" clearable @blur="updateBd(item)"></el-input>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <footer-page :serialnumber="serialnumber" :timevalue="timevalue" style="margin-left:5%"></footer-page>
  </div>
</template>

<script>
import footerPage from "../../components/kanbanShow/basic/footer"; //底部信息
import selectPage from "./select";

export default {
  name: "DreamShow",
  components: {
    footerPage,
    selectPage
  },
  data() {
    return {
      BDdata: [],
      carddata: [],
      cardarr: [],
      bdarr: [],
      serialnumber: 5,
      timevalue: "",
      fullscreen: false,
      fileVerify: false,
      DepttableData: [
        {
          type: "dept",
          row: 1,
          Dept_GLY_YTD: "2016-05-03",
          Dept_GLY_OurRank: "王小虎1",
          Dept_GLY_Benchmark: "上海",
          Dept_BS_YTD: "",
          Dept_BS_OurRank: "王小虎",
          Dept_BS_Benchmark: "上海",
          Dept_WaterUsage_YTD: "2016-05-03",
          Dept_WaterUsage_OurRank: "王小虎",
          Dept_WaterUsage_Benchmark: "上海",
          Dept_CC_YTD: "2016-05-03",
          Dept_CC_OurRank: "王小虎",
          Dept_CC_Benchmark: "上海"
        },
        {
          type: "dept",
          row: 2,
          Dept_GLY_YTD: "2016-05-03",
          Dept_GLY_OurRank: "王小虎",
          Dept_GLY_Benchmark: "上海",
          Dept_BS_YTD: "2016-05-03",
          Dept_BS_OurRank: "王小虎",
          Dept_BS_Benchmark: "上海",
          Dept_WaterUsage_YTD: "2016-05-03",
          Dept_WaterUsage_OurRank: "王小虎",
          Dept_WaterUsage_Benchmark: "上海",
          Dept_CC_YTD: "2016-05-03",
          Dept_CC_OurRank: "王小虎",
          Dept_CC_Benchmark: "上海"
        },
        {
          type: "dept",
          row: 3,
          Dept_GLY_YTD: "2016-05-03",
          Dept_GLY_OurRank: "王小虎",
          Dept_GLY_Benchmark: "上海",
          Dept_BS_YTD: "2016-05-03",
          Dept_BS_OurRank: "王小虎",
          Dept_BS_Benchmark: "上海",
          Dept_WaterUsage_YTD: "2016-05-03",
          Dept_WaterUsage_OurRank: "王小虎",
          Dept_WaterUsage_Benchmark: "上海",
          Dept_CC_YTD: "2016-05-03",
          Dept_CC_OurRank: "王小虎",
          Dept_CC_Benchmark: "上海"
        }
      ],
      AreatableData: [
        {
          type: "area",
          row: 1,
          Area_TRIFY_YTD: "2016-05-03",
          Area_TRIFY_OurRank: "王小虎",
          Area_TRIFY_Benchmark: "上海",
          Area_GLY_YTD: "2016-05-03",
          Area_GLY_OurRank: "王小虎",
          Area_GLY_Benchmark: "上海",
          Area_LEF_YTD: "2016-05-03",
          Area_LEF_OurRank: "王小虎",
          Area_LEF_Benchmark: "上海",
          Area_CC_YTD: "2016-05-03",
          Area_CC_OurRank: "王小虎",
          Area_CC_Benchmark: "上海"
        },
        {
          type: "area",
          row: 2,
          Area_TRIFY_YTD: "2016-05-03",
          Area_TRIFY_OurRank: "王小虎",
          Area_TRIFY_Benchmark: "上海",
          Area_GLY_YTD: "2016-05-03",
          Area_GLY_OurRank: "王小虎",
          Area_GLY_Benchmark: "上海",
          Area_LEF_YTD: "2016-05-03",
          Area_LEF_OurRank: "王小虎",
          Area_LEF_Benchmark: "上海",
          Area_CC_YTD: "2016-05-03",
          Area_CC_OurRank: "王小虎",
          Area_CC_Benchmark: "上海"
        },
        {
          type: "area",
          row: 3,
          Area_TRIFY_YTD: "2016-05-03",
          Area_TRIFY_OurRank: "王小虎",
          Area_TRIFY_Benchmark: "上海",
          Area_GLY_YTD: "2016-05-03",
          Area_GLY_OurRank: "王小虎",
          Area_GLY_Benchmark: "上海",
          Area_LEF_YTD: "2016-05-03",
          Area_LEF_OurRank: "王小虎",
          Area_LEF_Benchmark: "上海",
          Area_CC_YTD: "2016-05-03",
          Area_CC_OurRank: "王小虎",
          Area_CC_Benchmark: "上海"
        }
      ],
      organName: "",
      whoflag: false,
      BDflag: false
    };
  },
  methods: {
    rowClass({ row, column, rowIndex, columnIndex }) {
      if ((columnIndex <= 4) & (rowIndex === 0)) {
        return "background-color:#325194;border:none;color:white;margin:0px";
      } else {
        return "";
      }
    },
    selectsFun(val) {
      this.fileVerify = false;
    },
    cellclass({ row, column, rowIndex, columnIndex }) {
      return "padding:0px";
    },

    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    quit() {
      window.location.href = "/";
    },
    open_msg() {
      this.$confirm("添加或删除图片", {
        confirmButtonText: "删除",
        cancelButtonText: "添加",
        type: "info",
        center: true
      })
        .then(() => {
          //图片删除
        })
        .catch(() => {
          //添加图片
        });
    },
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    //修改who are文本框
    updatecard(item) {
      this.$post("/pi/common/saveOrUpdate", {
        id: item.id,
        value: item.value.trim(),
        name: "Who We Are"
      });
    },
    //修BD文本框
    updateBd(item) {
      this.$post("/pi/common/saveOrUpdate", {
        id: item.id,
        value: item.value.trim(),
        name: "BD"
      });
    }
  },
  mounted() {
    this.timevalue = this.getNowFormatDate();
    this.organName = JSON.parse(
      localStorage.getItem("userInfo")
    ).userInfo.organName;
  },
  created() {
    //看板表格数据
    this.$post("/pi/dream/query").then(res => {
      console.log(res.data);
    });

    this.$post("/pi/common/query", { name: "Who We Are" }).then(res => {
      this.carddata = res.data;
      let arr = [];
      if (res.data.length < 4) {
        let num = 4 - this.carddata.length;
        for (let i = 0; i < num; i++) {
          arr.push({ id: "", value: "" });
        }
        this.cardarr = arr;
      }
    });
    this.$post("/pi/common/query", { name: "BD" }).then(res => {
      this.BDdata = res.data;
      let arr = [];
      if (res.data.length < 7) {
        let num = 7 - this.BDdata.length;
        for (let i = 0; i < num; i++) {
          arr.push({ id: "", value: "" });
        }
        this.bdarr = arr;
      }
    });
  }
};
</script>
<style scoped>
.el-row {
  align-items: center;
}
.text-center {
  text-align: center;
}
.boxclass {
  border: 1px solid #325194;
  margin-right: 2%;
  margin-left: 2%;
  padding: 1%;
  border-radius: 2%;
}
/* .flex-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #325194;
  height: 35%;
} */
.block {
  width: 80%;
  height: 100%;
}
.card-box {
  width: 20%;
}
.el-row {
  margin-left: 0;
  margin-right: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 0;
  background-color: #f9fafc;
}
.text-width {
  width: 174px;
  text-align: center;
  position: relative;
  cursor: pointer;
  padding-top: 18px;
}
.span-text {
  width: 20px;
  line-height: 24px;
  background-color: blue;
  color: white;
  font-size: 20px;
  float: left;
  padding-left: 10px;
  padding-top: 10px;
}
.header-logo-img {
  width: 83px;
  height: 33px;
  /* position: absolute;
  top: 10px; */
}

.header-logo-img-vpo {
  height: 57px;
  position: absolute;
  right: 21px;
  top: 0px;
}
.el-card__header {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #325194 !important;
  color: white !important;
}
.line-flex {
  width: 20px;
  margin: 0 auto;
  line-height: 24px;
  font-size: 20px;
  margin-bottom: 20px;
}
.el-input--mini .el-input__inner {
  height: 50px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.header-organ {
  height: 57px;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  left: 50px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.file-div {
  position: absolute;
  width: 100%;
  top: 30px;
  border: 1px solid #325194;
  left: 0vw;
  background-color: #fff;
  z-index: 96;
}
.header-header-title {
  width: 40%;
  height: 50px;
  text-align: left;
  color: #325194;
  font-weight: bold;
  letter-spacing: 2px;
  margin-left: 30%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-card__body {
  padding: 0px;
}
div >>> .el-card__header {
  background-color: #325194;
  color: white;
}

.quit {
  /* height: 57px; */
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  margin-left: 10px;
}
div >>> .el-upload--picture-card {
  width: 200px;
  height: 254px;
  line-height: 254px;
}
.shuli {
  margin: 0 auto;
  width: 20px;
  line-height: 24px;
  border: 1px solid #333;
}
div >>> .cell {
  padding: 0px;
  padding-left: 0px !important;
}
div >>> .el-input__inner {
  text-align: center;
}
</style>
